<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Easy-MQ 控制台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f5;
            color: #333;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
        
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .card {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .card h3 {
            color: #667eea;
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }
        
        .stat {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }
        
        .stat-value {
            font-size: 1.5rem;
            font-weight: 600;
            color: #333;
        }
        
        .stat-label {
            color: #666;
        }
        
        .status {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 500;
        }
        
        .status.healthy {
            background: #d4edda;
            color: #155724;
        }
        
        .status.unhealthy {
            background: #f8d7da;
            color: #721c24;
        }
        
        .button {
            background: #667eea;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.875rem;
        }
        
        .button:hover {
            background: #5a6fd8;
        }
        
        .log-container {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 4px;
            padding: 1rem;
            max-height: 300px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.875rem;
        }
        
        .log-entry {
            margin-bottom: 0.25rem;
            padding: 0.25rem 0;
        }
        
        .refresh-button {
            background: #28a745;
            margin-left: 0.5rem;
        }
        
        .refresh-button:hover {
            background: #218838;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>🚀 Easy-MQ 控制台</h1>
    </div>
    
    <div class="container">
        <div class="dashboard">
            <!-- 系统概览 -->
            <div class="card">
                <h3>📊 系统概览</h3>
                <div class="stat">
                    <span class="stat-label">系统状态</span>
                    <span class="status healthy" id="systemStatus">健康</span>
                </div>
                <div class="stat">
                    <span class="stat-label">版本</span>
                    <span class="stat-value" id="version">1.0.0</span>
                </div>
                <div class="stat">
                    <span class="stat-label">运行时间</span>
                    <span class="stat-value" id="uptime">0天 0小时</span>
                </div>
            </div>
            
            <!-- 消息统计 -->
            <div class="card">
                <h3>📨 消息统计</h3>
                <div class="stat">
                    <span class="stat-label">总发送数</span>
                    <span class="stat-value" id="totalSent">0</span>
                </div>
                <div class="stat">
                    <span class="stat-label">总消费数</span>
                    <span class="stat-value" id="totalConsumed">0</span>
                </div>
                <div class="stat">
                    <span class="stat-label">错误数</span>
                    <span class="stat-value" id="errorCount">0</span>
                </div>
                <div class="stat">
                    <span class="stat-label">成功率</span>
                    <span class="stat-value" id="successRate">0%</span>
                </div>
            </div>
            
            <!-- 实时监控 -->
            <div class="card">
                <h3>⚡ 实时监控</h3>
                <div class="stat">
                    <span class="stat-label">活跃连接</span>
                    <span class="stat-value" id="activeConnections">0</span>
                </div>
                <div class="stat">
                    <span class="stat-label">消息速率</span>
                    <span class="stat-value" id="messageRate">0/秒</span>
                </div>
                <button class="button refresh-button" onclick="refreshData()">刷新</button>
            </div>
        </div>
        
        <!-- 主题列表 -->
        <div class="card">
            <h3>📋 主题列表</h3>
            <div id="topicsList">
                <p>正在加载主题列表...</p>
            </div>
        </div>
        
        <!-- 系统日志 -->
        <div class="card">
            <h3>📝 系统日志</h3>
            <div class="log-container" id="logContainer">
                <div class="log-entry">[INFO] 正在加载日志...</div>
            </div>
        </div>
    </div>
    
    <script>
        // 全局变量
        let refreshInterval;
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadOverview();
            loadMessageStats();
            loadRealtimeData();
            loadTopics();
            loadLogs();
            
            // 启动自动刷新
            startAutoRefresh();
        });
        
        // 加载系统概览
        async function loadOverview() {
            try {
                const response = await fetch('/api/console/overview');
                const data = await response.json();
                
                document.getElementById('systemStatus').textContent = data.healthy ? '健康' : '异常';
                document.getElementById('systemStatus').className = data.healthy ? 'status healthy' : 'status unhealthy';
                document.getElementById('version').textContent = data.version;
                
                // 计算运行时间
                const uptime = Math.floor((Date.now() - data.timestamp) / 1000);
                const days = Math.floor(uptime / 86400);
                const hours = Math.floor((uptime % 86400) / 3600);
                document.getElementById('uptime').textContent = `${days}天 ${hours}小时`;
            } catch (error) {
                console.error('加载系统概览失败:', error);
            }
        }
        
        // 加载消息统计
        async function loadMessageStats() {
            try {
                const response = await fetch('/api/console/messages/stats');
                const data = await response.json();
                
                document.getElementById('totalSent').textContent = data.totalSent || 0;
                document.getElementById('totalConsumed').textContent = data.totalConsumed || 0;
                document.getElementById('errorCount').textContent = data.errorCount || 0;
                document.getElementById('successRate').textContent = (data.successRate || 0) + '%';
            } catch (error) {
                console.error('加载消息统计失败:', error);
            }
        }
        
        // 加载实时数据
        async function loadRealtimeData() {
            try {
                const response = await fetch('/api/console/monitor/realtime');
                const data = await response.json();
                
                document.getElementById('activeConnections').textContent = data.activeConnections || 0;
                document.getElementById('messageRate').textContent = (data.messageRate || 0) + '/秒';
            } catch (error) {
                console.error('加载实时数据失败:', error);
            }
        }
        
        // 加载主题列表
        async function loadTopics() {
            try {
                const response = await fetch('/api/console/topics');
                const data = await response.json();
                
                const topicsList = document.getElementById('topicsList');
                if (data.topics && data.topics.length > 0) {
                    const topicsHtml = data.topics.map(topic => 
                        `<div style="padding: 0.5rem; background: #f8f9fa; margin: 0.25rem 0; border-radius: 4px;">📨 ${topic}</div>`
                    ).join('');
                    topicsList.innerHTML = topicsHtml;
                } else {
                    topicsList.innerHTML = '<p>暂无主题</p>';
                }
            } catch (error) {
                console.error('加载主题列表失败:', error);
            }
        }
        
        // 加载系统日志
        async function loadLogs() {
            try {
                const response = await fetch('/api/console/logs?limit=50');
                const data = await response.json();
                
                const logContainer = document.getElementById('logContainer');
                if (data.logs && data.logs.length > 0) {
                    const logsHtml = data.logs.map(log => 
                        `<div class="log-entry">${log}</div>`
                    ).join('');
                    logContainer.innerHTML = logsHtml;
                    logContainer.scrollTop = logContainer.scrollHeight;
                } else {
                    logContainer.innerHTML = '<div class="log-entry">暂无日志</div>';
                }
            } catch (error) {
                console.error('加载日志失败:', error);
            }
        }
        
        // 刷新所有数据
        function refreshData() {
            loadOverview();
            loadMessageStats();
            loadRealtimeData();
            loadTopics();
            loadLogs();
        }
        
        // 启动自动刷新
        function startAutoRefresh() {
            // 每30秒自动刷新一次
            refreshInterval = setInterval(refreshData, 30000);
        }
        
        // 页面卸载时清理定时器
        window.addEventListener('beforeunload', function() {
            if (refreshInterval) {
                clearInterval(refreshInterval);
            }
        });
    </script>
</body>
</html> 